<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单</title>
    <style>
        .menus{
            height: 1000px;
            width: 200px;
            border: 1px solid red;
        }
        .menus .header {
            background-color: gold;
            padding: 10px 5px;
            border-bottom: 1px solid #30799B;
            cursor: pointer;
        }
        .menus .content a{
            display: block;
            padding: 5px 5px;
            border-bottom: 1px dotted #dddddd;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div class="menus">
        <div class="item">
            <div class="header" onclick="clickme2(this);">上海</div>
            <div class="content hide">
                <a>闵行区</a>
                <a>松江区</a>
                <a>浦东新区</a>
                <a>普陀区</a>
                <a>青浦区</a>
                <a>宝山区</a>
            </div>
        </div>
        <div class="item">
            <div class="header" onclick="clickme2(this);">北京</div>
            <div class="content hide">
                <a>朝阳区</a>
                <a>海淀区</a>
                <a>昌平区</a>
                <a>东城区</a>
                <a>西城区</a>
                <a>顺义区</a>
                <a>怀柔区</a>
            </div>
        </div>
        <div class="item">
            <div class="header" onclick="clickme2(this);">天津</div>
            <div class="content hide">
                <a>和平区</a>
                <a>河东区</a>
                <a>南开区</a>
                <a>红桥区</a>
                <a>津南区</a>
                <a>宝坻区</a>
            </div>
        </div>
        <div class="item">
            <div class="header" onclick="clickme2(this);">广州</div>
            <div class="content hide">
                <a>越秀区</a>
                <a>荔湾区</a>
                <a>白云区</a>
                <a>黄埔区</a>
                <a>番禺区</a>
                <a>南沙区</a>
                <a>增城区</a>
            </div>
        </div>
    </div>
    <script src="static/js/jquery-3.7.1.min.js" ></script>
    <script>
        function clickme(self) {
        //$(self)    代表当前点击的标签。
        //$(self).next()   下一个标签
        //$(self).next().removeclass("hide")   删除样式
            var hashide=$(self).next().hasClass("hide")
            if (hashide){
                 $(self).next().removeClass("hide")
            }else{
                $(self).next().addClass("hide")
            }
        }

        function clickme2(self){
            var hashide=$(self).next().hasClass("hide")
            if (hashide){
            //让自己下面的功能展示出来
                $(self).next().removeClass("hide")
             }else{
                $(self).next().addClass("hide")
            }
            // 找父亲，再找到父亲的所有兄弟，，再去每个兄弟的子孙中寻找class="content"的添加class="hide"
            $(self).parent().siblings().find(".content").addClass("hide")

        }


</script>
</body>
</html>